<template>
  <div class="">
    <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        width="800px"
        :close-on-click-modal="false"
        @close="close"
    >
      <div class="tabledata">
        <el-tabs v-model="activeName" @tab-click="handleTabClick" class="mar_b20">
          <el-tab-pane label="未使用" name="2"></el-tab-pane>
          <el-tab-pane label="已使用" name="1"></el-tab-pane>
        </el-tabs>
        <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe style="width: 100%">
          <el-table-column prop="couponId" label="优惠券ID"></el-table-column>
          <el-table-column prop="couponName" label="优惠券名称"></el-table-column>
          <el-table-column prop="createdAt" label="领取时间"></el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            :current-page.sync='page.currentPage'
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="close">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getCouponList} from "@/api/user";

export default {
  name: "labelSave",
  created() {
  },
  data() {
    return {
      activeName:'2',
      list: [],
      listLoading: false,
      selectRows: "",
      elementLoadingText: "正在加载...",
      page: {
        total: 0,
        size: 10,
        currentPage: 1,
      },
      userData:{},
      title: "",
      dialogFormVisible: false,
    }
  },
  components: {},
  methods: {
    showEdit(row) {
      this.title = "优惠券列表";
      this.userData = row
      this.fetchData()
      this.dialogFormVisible = true;
    },
    close() {
      this.dialogFormVisible = false;
    },
    handleTabClick(){
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      const {data, count} = await getCouponList({page: this.page.currentPage,userId:this.userData.id,state:this.activeName,stoerId:this.stoerId});
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
  }
};
</script>
